<template>
  <div id="playlists">
    <div class="title">{{ playList.value }}</div>
    <van-grid class="playList">
      <div
       @click="goVideoView(item.id)"
        v-for="(item, index) in playList.list.slice(0, 10)"
        :key="index"
        class="play">
      <van-grid-item
      >
        <van-image :src="item.cover+'?param=150y100'" contain />

      </van-grid-item>
        <div>{{ item.name }}</div>
      </div>
    </van-grid>
  </div>
</template>
<script>
// 视频列表组件
import Vue from "vue";
import { Lazyload } from "vant";
Vue.use(Lazyload);

export default {
  props: {
    playList: {
      type: Object,
    },
    playlistsRows: {
      type: Number,
    },
  },
  data() {
    return {
      isShow: true,
    };
  },
  mounted(){
  },
  methods:{
    goVideoView(val){
      console.log(val);
      this.$router.push({path: '/videoView',query:{id:val}})
    }
  }
};
</script>
<style scoped>
#playlists {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  box-sizing: border-box;
}
#playlists .playList {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
#playlists .playList .play {
  width: 33%;
  margin: 3px;
}
#playlists > div:nth-child(1) {
  margin-left: 25px;
  font-size: 20px;
  font-weight: bold;
}
</style>